<template>
	<MainLayout>
		<!-- 导航 -->
		<view class="tabs-container">
			<up-tabs :list="taps" :current="currentTab" @click="onTabClick" :scrollable="taps.length > 4" />
		</view>

		<!-- 列表内容 -->
		<view class="list-container">
			<view class="list-item" v-for="(item, index) in list" :key="item.id || index">
				<!-- 头部：头像 + 用户名 -->
				<view class="list-header">
					<image :src="item.avatar" class="avatar" />
					<view class="username">{{ item.username }}</view>
				</view>

				<!-- 路线 -->
				<view class="route">{{ item.departure }} → {{ item.destination }}</view>

				<!-- 出发时间 -->
				<view class="departure-time">出发：{{ item.date.slice(0,10) }}</view>

				<view class="seats">
					<view v-if="currentTab==0">人数：{{ item.seats }}</view>
					<view v-if="currentTab==1">座位：{{ item.seats }}</view>
				</view>

				<!-- 备注 -->
				<view v-if="item.remark" class="remark">备注：{{ item.remark }}</view>

				<!-- 底部操作 -->
				<view class="list-footer">
					<view class="actions">
						<u-tag text="拨打电话" type="error" size="mini" @click="callPhone(item.id)" />
						<u-tag text="复制手机号" type="primary" size="mini" @click="copyPhone(item.id)" />
					</view>
				</view>
			</view>
		</view>

		<!-- 手动复制弹窗 -->
		<view v-if="showCopyModal" class="copy-modal">
			<view class="copy-content">
				<p>请手动复制手机号：</p>
				<input type="text" :value="copyMobile" readonly />
				<u-button @click="closeCopyModal">关闭</u-button>
			</view>
		</view>
	</MainLayout>
</template>

<script>
import api from '@/api'
import MainLayout from '@/layouts/MainLayout.vue'
import { baseURL } from '@/utils/config.js'

export default {
	components: { MainLayout },
	data() {
		return {
			currentTab: 0,
			taps: [{ name: '人找车' }, { name: '车找人' }],
			list: [],
			lastId: '',
			pageSize: 10,
			userInfo: {},
			showCopyModal: false,
			copyMobile: ''
		}
	},
	methods: {
		onTabClick(item) {
			this.currentTab = item.index;
			this.list = [];
			this.lastId = '';
			this.loadList();
		},
		async loadList() {
			try {
				const res = await api.journey.index({
					lastId: this.lastId,
					pageSize: this.pageSize,
					type: this.currentTab === 0 ? 'personFindCar' : 'carFindPerson'
				});
				if (res.code === 200 && res.data && Array.isArray(res.data.list)) {
					const newData = res.data.list.map(item => ({
						id: item.id,
						avatar: baseURL + (item.avatar || '/images/avatar/default.png'),
						username: item.username,
						departure: item.departure,
						destination: item.destination,
						date: item.departure_time,
						seats: item.seats,
						views: item.views,
						remark: item.remark || ''
					}));
					this.list = [...this.list, ...newData];
					if (newData.length > 0) this.lastId = newData[newData.length - 1].id;
				}
			} catch (e) {
				console.log('加载列表失败', e);
			}
		},
		async callPhone(id) {
			try {
				const res = await api.journey.detail({ id });
				if (res.code === 200 && res.data?.mobile) {
					uni.makePhoneCall({ phoneNumber: res.data.mobile });
				} else {
					uni.showToast({ title: '无法获取手机号', icon: 'error' });
				}
			} catch (e) {
				// 错误忽略
			}
		},
		async copyPhone(id) {
			try {
				const res = await api.journey.detail({ id });
				if (!(res.code === 200 && res.data?.mobile)) {
					uni.showToast({ title: '无法获取手机号', icon: 'error' });
					return;
				}
				const mobile = res.data.mobile;

				if (uni.setClipboardData) {
					uni.setClipboardData({
						data: mobile,
						success: () => uni.showToast({ title: '手机号已复制', icon: 'success' }),
						fail: () => {
							// 自动复制失败，显示手动复制弹窗
							this.copyMobile = mobile;
							this.showCopyModal = true;
						}
					});
				} else {
					// 不支持 setClipboardData，显示手动复制弹窗
					this.copyMobile = mobile;
					this.showCopyModal = true;
				}
			} catch (e) {
				
			}
		},
		closeCopyModal() {
			this.showCopyModal = false;
		}
	},
	async onLoad() {
		const query = uni.getStorageSync('journeyQuery');
		if (query) {
			this.currentTab = query.type === 'personFindCar' ? 0 : 1;
			uni.removeStorageSync('journeyQuery');
		}
		await this.loadList();
	}
};
</script>

<style scoped>
.tabs-container { background-color: #ffffff; }
.list-container { padding: 20rpx; }
.list-item {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}
.list-header { display: flex; align-items: center; margin-bottom: 12rpx; }
.avatar { width: 50rpx; height: 50rpx; border-radius: 50%; margin-right: 12rpx; }
.username { font-weight: bold; font-size: 30rpx; flex: 1; }
.route { font-size: 32rpx; font-weight: bold; margin: 10rpx 0; }
.departure-time { font-size: 28rpx; color: #666; margin-bottom: 12rpx; }
.remark {
	display: inline-block;
	background-color: #f5f5f5;
	color: #666;
	font-size: 26rpx;
	padding: 8rpx 16rpx;
	margin-left: -16rpx;
	border-radius: 12rpx;
	margin-bottom: 12rpx;
	max-width: 90%;
	word-break: break-word;
}
.seats { color: #666; font-size: 28rpx; margin-bottom: 12rpx; }
.list-footer { margin-top: 20rpx; display: flex; justify-content: flex-end; align-items: center; font-size: 28rpx; color: #999; }
.actions { display: flex; gap: 12rpx; }

/* 手动复制弹窗样式 */
.copy-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}
.copy-content {
	background: #fff;
	padding: 30rpx;
	border-radius: 20rpx;
	text-align: center;
	width: 80%;
}
.copy-content p { margin-bottom: 20rpx; font-size: 28rpx; }
.copy-content input {
	width: 100%;
	padding: 10rpx;
	font-size: 28rpx;
	margin-bottom: 20rpx;
	text-align: center;
}
.copy-content u-button { width: 100%; }
</style>